<script>
  import dayjs from "dayjs";
  import relativeTime from "dayjs/plugin/relativeTime";
  import "dayjs/locale/zh-cn";
  import config from '../routes/_config';
  dayjs.extend(relativeTime);
  dayjs.locale("zh-cn");
  export let topic;
</script>

<style>
  [style*="--aspect-ratio"] > :first-child {
      width: 100%;
  }
  [style*="--aspect-ratio"] > img {
      object-fit: cover;
      height: auto;
  }
  @supports (--custom: property) {
      [style*="--aspect-ratio"] {
          position: relative;
      }
      [style*="--aspect-ratio"]::before {
          content: "";
          display: block;
          padding-bottom: calc(100% / (var(--aspect-ratio)));
      }
      [style*="--aspect-ratio"] > :first-child {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
      }
      [style*="--aspect-ratio"] > video {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          height: 100%;
      }
  }
  .card-image {
      /* border-radius: 0.1875rem !important; */
      transition: all 0.2s ease-out;
  }
  .card-img {
      border-radius: 0rem;
  }
  .topic-summary {
    height: 4.5rem;
    overflow: hidden;
  }
  @media (max-width: 767px) {
	.topic-summary {
		font-size: .8rem;
		height: 3.6rem;
	}
  }
</style>

<div
  class="card card-video shadow mb-2 mb-md-4 border-bottom-primary">
  <div class="card-header box-header py-3">
      <h6 class="m-0">影单</h6>
  </div>
  <div class="card-image overflow-hidden" style="--aspect-ratio:16/9;">
      <img
          class="img card-img"
          alt={topic.topic}
          src="{config.imgHost}/uploads/400/{topic.movies.length ? topic.movies[0].img : 'default.jpg'}" />
  </div>
  <div class="card-body box-body">
      <a href="/topic/{topic._id}" class="stretched-link text-decoration-none" title={topic.topic}>
          <h5 class="box-title card-title text-truncate text-decoration-none">{topic.topic}</h5>
      </a>
      <div
          class="topic-summary">
          {topic.summary}
      </div>
  </div>
</div>
